<template>
  <el-card class="box-card h100" :style="themeOpacity">
    <div slot="header" :class="['clearfix', isDraggable ? 'draggable-move-clazz' : '']">
      <el-input v-model="dataSource['folderName']" class="draggable-setting-input" v-show="isDraggable" />
      <span v-show="!isDraggable">{{ dataSource['folderName'] }}</span>
      <el-button style="float: right; padding: 3px 0px" type="text" @click="delCard"  v-show="isDraggable">删除</el-button>
    </div>
    <el-scrollbar class="scrollbar-none-horizontal" style="height: 100%;">
      <el-row style="width: 100%;height: 100%;">
        <draggable
          style="height: 100%;width:100%;z-index: 1;"
          v-model="dataSource['receptionFolderApplyList']"
          v-bind="{
            ...dragOptions,
            targetName: 'canUseCard'
          }"
          :disabled="!isDraggable"
          :move="canMove"
          @start="itemDraggable = true"
          @end="itemDraggable = false"
        >
          <el-col
            :span="12"
            :class="['card-two-item', isDraggable ? 'draggable-move-clazz' : ''].join(' ')"
            v-for="(item, index) in dataSource['receptionFolderApplyList']"
            :key="item.receptionApplyId + 'item' + index"
          >
            <el-link @click="goApp(item)" :underline="false">
              <img src="@/assets/images/notice-list.png" alt="" class="icon-image" />
              <span>{{ item.menuName || '未知应用' }}</span>
            </el-link>
          </el-col>
        </draggable>
      </el-row>
    </el-scrollbar>
  </el-card>
</template>

<script>
  import { mixin } from '@/mixin'
  import { getDraggableName, getDraggableTargetName, isCanDraggable } from '@/utils/draggableHelper'
  export default {
    name: 'DraggableCard',
    data() {
      return {
        title: 'OA服务',
        itemDraggable: false,
        dragOptions: {
          animation: 200,
          disabled: false,
          ghostClass: 'ghost',
          group: { name: 'app' }
        },
        canDraggableNames: [],
        cacheOldValue: []
      }
    },
    computed: {
      resource() {
        //获取新增的app
        const draggableObj = this.$store.state.app.draggableObj
        let source = this.dataSource['receptionFolderApplyList'] || []
        if (draggableObj && source.length) {
          let findFlags = []
          // 查找相同项
          source.map((item, index) => {
            let isContains =
              item['menuName'] === draggableObj['menuName'] &&
              item['receptionApplyId'] === draggableObj['receptionApplyId']
            if (isContains)
              findFlags.push({
                ...item,
                findIndex: index
              })
          })
          // 含有两个条目以上，重复拖拽需要去重
          if (findFlags.length && findFlags.length > 1) {
            // 保留第一个
            findFlags.splice(0, 1)
            // 清除所有冗余元素
            findFlags.map(flagItem => source.splice(flagItem.findIndex, 1))
          }
        }
        return source
      }
    },
    watch: {
      resource(val) {}
    },

    props: {
      isDraggable: {
        type: Boolean,
        default: false
      },
      dataSource: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      delCard() {

        console.log(this.dataSource)
        this.$emit('delCard', this.dataSource);
      },
      canMove(e, originalEvent) {
        return isCanDraggable(e)
      },
	  goApp(item){
		  console.log(item)
		   // location.href = item.path
		 if(item.isFrame==0){
       window.open('javascript:window.name;', '<script>document.write("限学校内网访问!");location.replace("'+item.path+'")<\/script>');
		 } else {
       location.href = item.path
     }
	  }
    },
    components: {},
    mixins: [mixin]
  }
</script>

<style scoped lang="scss">
  .box-card .scrollbar-none-horizontal {
    ::v-deep .el-scrollbar__view {
      width: 100%;
      height: 100%;
    }
  }
  .card-two-item {
    padding-bottom: 10px;
    .el-link {
      line-height: 26px;
      .icon-image {
        margin-right: 10px;
      }
    }
    .card-item-text {
      line-height: 30px;
      display: inline-block;
      width: calc(100% - 50px);
      text-align: left;
    }
    .card-item-num {
      display: inline-block;
      width: 50px;
      text-align: left;
    }
  }
</style>
